<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动练习</title>
<style>
body,h2,ul{margin:0; padding:0;font-family:"宋体";}
li{list-style:none;}
a{text-decoration:none; color:#333; }
img{border:none;vertical-align:top}/* 清除空隙 */
.clear{zoom:1}
.clear:after{content:""; display:block;clear:both}

.wrap{width:376px; margin:30px auto; padding-top:11px; background:#f4fafb;}
.head{height:25px; background:url(img3/headBg.gif) no-repeat;}
.title{line-height:24px; padding-top:1px; font-size:12px; text-indent:33px; color:#294852; background:url(img3/titleBg.gif) no-repeat 9px 6px;}
.piclist{padding-top:16px}
.piclist li{width:91px; padding-right:17px; margin:0 8px; float:left; display:inline;background:url(img3/liBg.gif) no-repeat right 17px}/* display:inline的原因：IE6下margin的最小边距bug */
.piclist a{display:block;}
.piclist img{border:1px solid #c8c4d3;padding:2px; background-color:#fff;}
.piclist strong{display:block;text-align:center;padding-top:4px;font:normal 12px/22px "宋体"}/* 正常字体 字体大小 行高 字体 */
.textlist{padding-left:0 27px;line-height:22px;font-size:12px;}
.textlist li{background:url(img3/textListBg.gif) no-repeat 15px;text-indent:28px;}
</style>
</head>
<body>
<div class="wrap">
  <div class="head">
    <h2 class="title">华语谍报</h2>
  </div>
  <ul class="piclist clear">  <!-- !!重要 -->
	<li>
	  <a href="#">
		<img src="img3/pic.gif"  alt="大叔" />
		<strong>大叔</strong>
	  </a>
	</li>
	<li>
	  <a href="#">
		<img src="img3/pic.gif"  alt="大叔" />
		<strong>大叔</strong>
	  </a>
    </li>
	<li>
	  <a href="#">
		<img src="img3/pic.gif"  alt="大叔" />
		<strong>大叔</strong>
	  </a>
    </li>
  </ul>
  <ul class="textlist">
	<li>
	  <a href="#">化妆，还是伪装？港三美亚版《最强喜事》</a>
	</li>
	<li>
	  <a href="#">阴间猛鬼阳间小三——港三区千绩版《恶胎》</a>
	</li>
	<li>
	  <a href="#">孤寂的爱情心事——《征婚启事》碟评</a>
	</li>
  </ul>
</div>
</body>
</html>
